<template>
	<div class="settings-box">
		<div class="h-800-b2">
			<van-tabs v-model:active="activeName">
				<van-tab title="全部" name="quan"></van-tab>
				<van-tab title="页面模式" name="ye"></van-tab>
				<van-tab title="显示模式" name="xian"></van-tab>
				<van-tab title="发音模式" name="fa"></van-tab>
				<van-tab title="课堂听写" name="ke"></van-tab>
				<van-tab title="速率/停顿" name="su"></van-tab>
				<van-tab title="播出模式" name="bo"></van-tab>
				<van-tab title="克漏字模式" name="lou"></van-tab>
			</van-tabs>
			<!-- 移动端 -->
			<van-collapse :border="false" v-model="collapses">
				<!-- 页面模式 -->
				<van-collapse-item title="页面模式" name="1" v-show="activeName=='quan'||activeName=='ye'">
					<div class="settings-list">
						<van-tabs v-model:active="active" type="card">
							<van-tab title="沉浸">
								<div v-if="active==0">
									<van-cell center title="沉浸模式">
										<template #right-icon>
											<van-switch v-model="checked" />
										</template>
									</van-cell>
								</div>
							</van-tab>
							<van-tab title="字体">
								<div v-if="active==1" class="setting-list-box p15 d-flex d-col-bottom">
									<div class="f24">A<span class="f20">A</span><span class="f16">A</span></div>
									<div class="size-right ml20 flex1">
										<div class="d-flex mb15 d-col-bottom">
											<div class="f20 flex1 ">大</div>
											<div class="f18 flex1 d-text-center">中</div>
											<div class="f14 flex1 d-text-right">小</div>
										</div>
										<van-slider v-model="sizeValue" @change="onChange" />
									</div>
								</div>
							</van-tab>
							<van-tab title="同步">
								<div v-if="active==2">
									<van-cell center title="同步">
										<template #right-icon>
											<van-switch v-model="checkedtb" />
										</template>
									</van-cell>
								</div>
							</van-tab>
						</van-tabs>

					</div>
				</van-collapse-item>
				<!-- 显示模式 -->
				<van-collapse-item title="显示模式" name="2" v-show="activeName=='quan'||activeName=='xian'">
					<div class="settings-list">
						<van-tabs v-model:active="active1" type="card">
							<van-tab title="原文与译文显示模式">
								<div class="setting-list-box pt15">
									<div class="pl20">原文</div>
									<van-radio-group v-model="checked">
										<van-cell-group inset>
											<van-cell title="显示" clickable @click="checked = '1'">
												<template #right-icon>
													<van-radio name="1" checked-color="#0052D9" />
												</template>
											</van-cell>
											<van-cell title="隐藏" clickable @click="checked = '2'">
												<template #right-icon>
													<van-radio name="2" checked-color="#0052D9" />
												</template>
											</van-cell>
										</van-cell-group>
									</van-radio-group>
								</div>
								<div class="setting-list-box pt15">
									<div class="pl20">译文</div>
									<van-radio-group v-model="checked2">
										<van-cell-group inset>
											<van-cell title="显示" clickable @click="checked2 = '1'">
												<template #right-icon>
													<van-radio name="1" checked-color="#0052D9" />
												</template>
											</van-cell>
											<van-cell title="隐藏" clickable @click="checked2 = '2'">
												<template #right-icon>
													<van-radio name="2" checked-color="#0052D9" />
												</template>
											</van-cell>
										</van-cell-group>
									</van-radio-group>
								</div>
								<div class="setting-list-box pt15">
									<div class="pl20">显示方式</div>
									<van-radio-group v-model="checked3">
										<van-cell-group inset>
											<van-cell title="点击" clickable @click="checked3 = '1'">
												<template #right-icon>
													<van-radio name="1" checked-color="#0052D9" />
												</template>
											</van-cell>
											<van-cell title="直接" clickable @click="checked3 = '2'">
												<template #right-icon>
													<van-radio name="2" checked-color="#0052D9" />
												</template>
											</van-cell>
										</van-cell-group>
									</van-radio-group>
								</div>
							</van-tab>
							<van-tab title="原文与译文显示模式">
								<div class="">
									<van-cell center title="译文显示模式">
										<template #right-icon>
											<van-radio-group v-model="checked" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">对照</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">不对照</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<van-radio-group v-model="checkedz">
										<van-cell-group inset>
											<van-cell title="英中对照" clickable @click="checkedz = '1'">
												<template #right-icon>
													<van-radio name="1" checked-color="#0052D9" />
												</template>
											</van-cell>
											<van-cell title="中英对照" clickable @click="checkedz = '2'">
												<template #right-icon>
													<van-radio name="2" checked-color="#0052D9" />
												</template>
											</van-cell>
										</van-cell-group>
									</van-radio-group>
								</div>
							</van-tab>
						</van-tabs>

					</div>

				</van-collapse-item>
				<van-collapse-item title="发音模式" name="3" v-show="activeName=='quan'||activeName=='fa'">
					<!-- 发音模式 -->
					<div class="settings-list">
						<van-tabs v-model:active="active2" type="card">
							<van-tab title="句子发音">
								<div class="setting-list-box pt15">
									<van-cell center title="句子发音">
										<template #right-icon>
											<van-radio-group v-model="checkedf1" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">是</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">不是</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<div class="settings-cont">
										<van-radio-group v-model="checkedf2" direction="horizontal" shape="dot">
											<div class="k-btn-box">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">美式</span></van-radio>
											</div>
											<div class="k-btn-box">
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">英式</span></van-radio>
											</div>
										</van-radio-group>
										<div class="speed-box d-flex">
											<div class="d-flex d-col-center">
												<div class="sl mr8">男生</div>
												<div class="sl-input"><van-field v-model="valuef3" /></div>
												<div class="sr ml8">次</div>
											</div>
											<div class="d-flex d-col-center speed-r">
												<div class="sl mr8">女生</div>
												<div class="sl-input"><van-field v-model="valuef4" /></div>
												<div class="sr ml8">次</div>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="句子中译发音">
								<div class="setting-list-box pt15">
									<van-cell center title="句子中译发音">
										<template #right-icon>
											<van-radio-group v-model="checkedf1" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">是</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">不是</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<div class="settings-cont">
										<van-radio-group v-model="checkedf2" direction="horizontal" shape="dot">
											<div class="k-btn-box">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">美式</span></van-radio>
											</div>
											<div class="k-btn-box">
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">英式</span></van-radio>
											</div>
										</van-radio-group>
										<div class="speed-box d-flex">
											<div class="d-flex d-col-center">
												<div class="sl mr8">男生</div>
												<div class="sl-input"><van-field v-model="valuef1" /></div>
												<div class="sr ml8">次</div>
											</div>
											<div class="d-flex d-col-center speed-r">
												<div class="sl mr8">女生</div>
												<div class="sl-input"><van-field v-model="valuef2" /></div>
												<div class="sr ml8">次</div>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>

					</div>

				</van-collapse-item>
				<van-collapse-item title="课堂听写" name="4" v-show="activeName=='quan'||activeName=='ke'">
					<!-- 课堂听写 -->
					<div class="settings-list">
						<div class="tit f14">课堂听写</div>
						<van-tabs v-model:active="active3" type="card">
							<van-tab v-for="item of tingxieList" ::key="item.status1" :title="item.name">
								<div class="setting-list-box pt15">
									<van-cell center title="发音模式">
										<template #right-icon>
											<van-radio-group v-model="item.status1" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">句子发音</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">句子中译发音</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<div class="settings-cont">
										<van-radio-group v-model="item.status2" direction="horizontal" shape="dot">
											<div class="k-btn-box">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">美式</span></van-radio>
											</div>
											<div class="k-btn-box">
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">英式</span></van-radio>
											</div>
										</van-radio-group>
										<div class="speed-box d-flex">
											<div class="d-flex d-col-center">
												<div class="sl mr8">男生</div>
												<div class="sl-input"><van-field v-model="item.vel1" /></div>
												<div class="sr ml8">次</div>
											</div>
											<div class="d-flex d-col-center speed-r">
												<div class="sl mr8">女生</div>
												<div class="sl-input"><van-field v-model="item.vel2" /></div>
												<div class="sr ml8">次</div>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>

					</div>

				</van-collapse-item>
				<van-collapse-item title="速率/停顿" name="5" v-show="activeName=='quan'||activeName=='su'">
					<!-- 速率/停顿 -->
					<div class="settings-list">
						<van-tabs v-model:active="active4" type="card">
							<van-tab title="句子发音">
								<div class="setting-list-box pt15">
									<div class="speed-box d-flex">
										<div class="d-flex d-col-center">
											<div class="sl mr8">速率</div>
											<div class="sl-input"><van-field v-model="values1" /></div>
											<div class="sr ml8">倍</div>
										</div>
										<div class="d-flex d-col-center speed-r">
											<div class="sl mr8">停顿</div>
											<div class="sl-input"><van-field v-model="values2" /></div>
											<div class="sr ml8">秒</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="中译发音">
								<div class="setting-list-box pt15">
									<div class="speed-box d-flex">
										<div class="d-flex d-col-center">
											<div class="sl mr8">速率</div>
											<div class="sl-input"><van-field v-model="values3" /></div>
											<div class="sr ml8">倍</div>
										</div>
										<div class="d-flex d-col-center speed-r">
											<div class="sl mr8">停顿</div>
											<div class="sl-input"><van-field v-model="values4" /></div>
											<div class="sr ml8">秒</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="段落等待">
								<div class="setting-list-box pt15">
									<div class="speed-box d-flex">
										<div class="d-flex d-col-center">
											<div class="sl mr8">速率</div>
											<div class="sl-input"><van-field v-model="values5" /></div>
											<div class="sr ml8">倍</div>
										</div>
										<div class="d-flex d-col-center speed-r">
											<div class="sl mr8">停顿</div>
											<div class="sl-input"><van-field v-model="values6" /></div>
											<div class="sr ml8">秒</div>
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>

					</div>

				</van-collapse-item>
				<van-collapse-item title="播出模式" name="6" v-show="activeName=='quan'||activeName=='bo'">
					<!-- 播出模式 -->
					<div class="settings-list">
						<div class="bochu-box">
							<div class="bochu-box-t">
								<van-radio-group v-model="checked" direction="horizontal" shape="dot">
									<div class="t-btn-box">
										<van-radio name="1" checked-color="#0052D9"><span
												class="ml8">句子</span></van-radio>
									</div>
									<div class="t-btn-box">
										<van-radio name="2" checked-color="#0052D9"><span
												class="ml8">段落</span></van-radio>
									</div>
									<div class="t-btn-box">
										<van-radio name="3" checked-color="#0052D9"><span
												class="ml8">翻译</span></van-radio>
									</div>
								</van-radio-group>
							</div>
							<van-radio-group v-model="checked">
								<van-cell-group inset>
									<van-cell title="一句英文一句中文" clickable @click="checked = '1'">
										<template #right-icon>
											<van-radio name="1" checked-color="#0052D9" />
										</template>
									</van-cell>
									<van-cell title="一句中文一句英文" clickable @click="checked = '2'">
										<template #right-icon>
											<van-radio name="2" checked-color="#0052D9" />
										</template>
									</van-cell>
								</van-cell-group>
							</van-radio-group>
						</div>
					</div>

				</van-collapse-item>
				<van-collapse-item title="克漏字模式" name="7" v-show="activeName=='quan'||activeName=='lou'">
					<!-- 克漏字模式 -->
					<div class="settings-list">
						<van-tabs v-model:active="active5" type="card">
							<van-tab title="百分比">
								<div class="setting-list-box pt15">
									<van-cell center title="句子发音">
										<template #right-icon>
											<van-radio-group v-model="checkedz1" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">是</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">不是</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<div class="zhezhu-box2 d-flex">
										<div class="d-flex d-col-center zhezhu-b">
											<div class="sl mr8">遮住</div>
											<div class="zhezhu-r d-flex d-col-center">
												<div class="sl-input"><van-field v-model="valuez1" /></div>
												<div class="sr ml8">%</div>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="默认比">
								<div class="setting-list-box pt15">
									<van-cell center title="句子发音">
										<template #right-icon>
											<van-radio-group v-model="checkedz2" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">是</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">不是</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<div class="zhezhu-box2 d-flex">
										<div class="d-flex d-col-center zhezhu-b">
											<div class="sl mr8">遮住</div>
											<div class="zhezhu-r d-flex d-col-center">
												<div class="sl-input"><van-field v-model="valuez2" /></div>
												<div class="sr ml8">%</div>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>

					</div>

				</van-collapse-item>
			</van-collapse>
		</div>
		<!-- ipad -->
		<div class="ipad-pc-b1">
			<div class="d-flex settings-list-item">
				<div class="settings-list-box">
					<div class="settings-list">
						<div class="tit f14">页面模式</div>
						<van-tabs v-model:active="active" type="card">
							<van-tab title="沉浸">
								<div class="h75 pt15">
									<van-cell center title="沉浸模式">
										<template #right-icon>
											<van-switch v-model="checked" />
										</template>
									</van-cell>
								</div>
							</van-tab>
							<van-tab title="字体">
								<div class="setting-list-box p15 d-flex d-col-bottom">
									<div class="f24">A<span class="f20">A</span><span class="f16">A</span></div>
									<div class="size-right ml20 flex1">
										<div class="d-flex mb15 d-col-bottom">
											<div class="f20 flex1 ">大</div>
											<div class="f18 flex1 d-text-center">中</div>
											<div class="f14 flex1 d-text-right">小</div>
										</div>
										<van-slider v-model="sizeValue" @change="onChange" />
									</div>
								</div>
							</van-tab>
							<van-tab title="同步">
								<div class="h75 pt15">
									<van-cell center title="同步">
										<template #right-icon>
											<van-switch v-model="checkedtb" />
										</template>
									</van-cell>
								</div>
							</van-tab>
						</van-tabs>

					</div>
					<div class="settings-list">
						<div class="tit f14">显示模式</div>
						<van-tabs v-model:active="active7" type="card">
							<van-tab title="原文与译文显示模式">
								<div class="setting-list-box pt15">
									<div class="pl20">原文</div>
									<van-radio-group v-model="checked">
										<van-cell-group inset>
											<van-cell title="显示" clickable @click="checked = '1'">
												<template #right-icon>
													<van-radio name="1" checked-color="#0052D9" />
												</template>
											</van-cell>
											<van-cell title="隐藏" clickable @click="checked = '2'">
												<template #right-icon>
													<van-radio name="2" checked-color="#0052D9" />
												</template>
											</van-cell>
										</van-cell-group>
									</van-radio-group>
								</div>
								<div class="setting-list-box pt15">
									<div class="pl20">译文</div>
									<van-radio-group v-model="checked2">
										<van-cell-group inset>
											<van-cell title="显示" clickable @click="checked2 = '1'">
												<template #right-icon>
													<van-radio name="1" checked-color="#0052D9" />
												</template>
											</van-cell>
											<van-cell title="隐藏" clickable @click="checked2 = '2'">
												<template #right-icon>
													<van-radio name="2" checked-color="#0052D9" />
												</template>
											</van-cell>
										</van-cell-group>
									</van-radio-group>
								</div>
								<div class="setting-list-box pt15">
									<div class="pl20">显示方式</div>
									<van-radio-group v-model="checked3">
										<van-cell-group inset>
											<van-cell title="点击" clickable @click="checked3 = '1'">
												<template #right-icon>
													<van-radio name="1" checked-color="#0052D9" />
												</template>
											</van-cell>
											<van-cell title="直接" clickable @click="checked3 = '2'">
												<template #right-icon>
													<van-radio name="2" checked-color="#0052D9" />
												</template>
											</van-cell>
										</van-cell-group>
									</van-radio-group>
								</div>
							</van-tab>
							<van-tab title="原文与译文显示模式">
								<div class="">
									<van-cell center title="译文显示模式">
										<template #right-icon>
											<van-radio-group v-model="checked" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">对照</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">不对照</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<van-radio-group v-model="checkedz">
										<van-cell-group inset>
											<van-cell title="英中对照" clickable @click="checkedz = '1'">
												<template #right-icon>
													<van-radio name="1" checked-color="#0052D9" />
												</template>
											</van-cell>
											<van-cell title="中英对照" clickable @click="checkedz = '2'">
												<template #right-icon>
													<van-radio name="2" checked-color="#0052D9" />
												</template>
											</van-cell>
										</van-cell-group>
									</van-radio-group>
								</div>
							</van-tab>
						</van-tabs>

					</div>
					<div class="settings-list">
						<div class="tit f14">发音模式</div>
						<van-tabs v-model:active="active6" type="card">
							<van-tab title="句子发音">
								<div class="setting-list-box pt15">
									<van-cell center title="句子发音">
										<template #right-icon>
											<van-radio-group v-model="checkedf1" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">是</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">不是</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<div class="settings-cont">
										<van-radio-group v-model="checkedf2" direction="horizontal" shape="dot">
											<div class="k-btn-box">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">美式</span></van-radio>
											</div>
											<div class="k-btn-box">
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">英式</span></van-radio>
											</div>
										</van-radio-group>
										<div class="speed-box d-flex">
											<div class="d-flex d-col-center">
												<div class="sl mr8">男生</div>
												<div class="sl-input"><van-field v-model="valuef3" /></div>
												<div class="sr ml8">次</div>
											</div>
											<div class="d-flex d-col-center speed-r">
												<div class="sl mr8">女生</div>
												<div class="sl-input"><van-field v-model="valuef4" /></div>
												<div class="sr ml8">次</div>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="句子中译发音">
								<div class="setting-list-box pt15">
									<van-cell center title="句子中译发音">
										<template #right-icon>
											<van-radio-group v-model="checkedf1" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">是</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">不是</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<div class="settings-cont">
										<van-radio-group v-model="checkedf2" direction="horizontal" shape="dot">
											<div class="k-btn-box">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">美式</span></van-radio>
											</div>
											<div class="k-btn-box">
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">英式</span></van-radio>
											</div>
										</van-radio-group>
										<div class="speed-box d-flex">
											<div class="d-flex d-col-center">
												<div class="sl mr8">男生</div>
												<div class="sl-input"><van-field v-model="valuef1" /></div>
												<div class="sr ml8">次</div>
											</div>
											<div class="d-flex d-col-center speed-r">
												<div class="sl mr8">女生</div>
												<div class="sl-input"><van-field v-model="valuef2" /></div>
												<div class="sr ml8">次</div>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>

					</div>
				</div>
				<div class="settings-list-box">
					<div class="settings-list">
						<div class="tit f14">课堂听写</div>
						<van-tabs v-model:active="active2" type="card">
							<van-tab v-for="item of tingxieList" ::key="item.status1" :title="item.name">
								<div class="setting-list-box pt15">
									<van-cell center title="发音模式">
										<template #right-icon>
											<van-radio-group v-model="item.status1" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">句子发音</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">句子中译发音</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<div class="settings-cont">
										<van-radio-group v-model="item.status2" direction="horizontal" shape="dot">
											<div class="k-btn-box">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">美式</span></van-radio>
											</div>
											<div class="k-btn-box">
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">英式</span></van-radio>
											</div>
										</van-radio-group>
										<div class="speed-box d-flex">
											<div class="d-flex d-col-center">
												<div class="sl mr8">男生</div>
												<div class="sl-input"><van-field v-model="item.vel1" /></div>
												<div class="sr ml8">次</div>
											</div>
											<div class="d-flex d-col-center speed-r">
												<div class="sl mr8">女生</div>
												<div class="sl-input"><van-field v-model="item.vel2" /></div>
												<div class="sr ml8">次</div>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>

					</div>
					<div class="settings-list">
						<div class="tit f14">速率/停顿</div>
						<van-tabs v-model:active="active3" type="card">
							<van-tab title="句子发音">
								<div class="setting-list-box pt15">
									<div class="speed-box d-flex">
										<div class="d-flex d-col-center">
											<div class="sl mr8">速率</div>
											<div class="sl-input"><van-field v-model="values1" /></div>
											<div class="sr ml8">倍</div>
										</div>
										<div class="d-flex d-col-center speed-r">
											<div class="sl mr8">停顿</div>
											<div class="sl-input"><van-field v-model="values2" /></div>
											<div class="sr ml8">秒</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="中译发音">
								<div class="setting-list-box pt15">
									<div class="speed-box d-flex">
										<div class="d-flex d-col-center">
											<div class="sl mr8">速率</div>
											<div class="sl-input"><van-field v-model="values3" /></div>
											<div class="sr ml8">倍</div>
										</div>
										<div class="d-flex d-col-center speed-r">
											<div class="sl mr8">停顿</div>
											<div class="sl-input"><van-field v-model="values4" /></div>
											<div class="sr ml8">秒</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="段落等待">
								<div class="setting-list-box pt15">
									<div class="speed-box d-flex">
										<div class="d-flex d-col-center">
											<div class="sl mr8">速率</div>
											<div class="sl-input"><van-field v-model="values5" /></div>
											<div class="sr ml8">倍</div>
										</div>
										<div class="d-flex d-col-center speed-r">
											<div class="sl mr8">停顿</div>
											<div class="sl-input"><van-field v-model="values6" /></div>
											<div class="sr ml8">秒</div>
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>

					</div>
					<div class="settings-list">
						<div class="tit f14">播出模式</div>
						<div class="bochu-box">
							<div class="bochu-box-t">
								<van-radio-group v-model="checkedbo" direction="horizontal" shape="dot">
									<div class="t-btn-box">
										<van-radio name="1" checked-color="#0052D9"><span
												class="ml8">句子</span></van-radio>
									</div>
									<div class="t-btn-box">
										<van-radio name="2" checked-color="#0052D9"><span
												class="ml8">段落</span></van-radio>
									</div>
									<div class="t-btn-box">
										<van-radio name="3" checked-color="#0052D9"><span
												class="ml8">翻译</span></van-radio>
									</div>
								</van-radio-group>
							</div>
							<van-radio-group v-model="checkedyi">
								<van-cell-group inset>
									<van-cell title="一句英文一句中文" clickable @click="checkedyi = '1'">
										<template #right-icon>
											<van-radio name="1" checked-color="#0052D9" />
										</template>
									</van-cell>
									<van-cell title="一句中文一句英文" clickable @click="checkedyi = '2'">
										<template #right-icon>
											<van-radio name="2" checked-color="#0052D9" />
										</template>
									</van-cell>
								</van-cell-group>
							</van-radio-group>
						</div>
					</div>
					<div class="settings-list">
						<div class="tit f14">克漏字模式</div>
						<van-tabs v-model:active="active4" type="card">
							<van-tab title="百分比">
								<div class="setting-list-box pt15">
									<van-cell center title="句子发音">
										<template #right-icon>
											<van-radio-group v-model="checkedz1" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">是</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">不是</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<div class="zhezhu-box2 d-flex">
										<div class="d-flex d-col-center zhezhu-b">
											<div class="sl mr8">遮住</div>
											<div class="zhezhu-r d-flex d-col-center">
												<div class="sl-input"><van-field v-model="valuez1" /></div>
												<div class="sr ml8">%</div>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="默认比">
								<div class="setting-list-box pt15">
									<van-cell center title="句子发音">
										<template #right-icon>
											<van-radio-group v-model="checkedz2" direction="horizontal" shape="dot">
												<van-radio name="1" checked-color="#0052D9"><span
														class="ml8">是</span></van-radio>
												<van-radio name="2" checked-color="#0052D9"><span
														class="ml8">不是</span></van-radio>
											</van-radio-group>
										</template>
									</van-cell>
									<div class="zhezhu-box2 d-flex">
										<div class="d-flex d-col-center zhezhu-b">
											<div class="sl mr8">遮住</div>
											<div class="zhezhu-r d-flex d-col-center">
												<div class="sl-input"><van-field v-model="valuez2" /></div>
												<div class="sr ml8">%</div>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const props = defineProps({
		products: {
			type: Array,
		},
	});
	const value1 = ref('')
	const activeName = ref('quan')
	const tingxieList = ref([{
		name: '自定义1',
		status1: '1',
		status2: '1',
		status3: 1,
		vel1: '1',
		vel2: '2'
	}, {
		name: '自定义2',
		status1: '1',
		status2: '1',
		status3: 1,
		vel1: '11',
		vel2: '22'
	}])

	// 模式选择
	const active = ref(-1)
	const active1 = ref(-1)
	const active2 = ref(-1)
	const active3 = ref(-1)
	const active4 = ref(-1)
	const active5 = ref(-1)
	const active6 = ref(-1)

	// 默认展开项
	const collapses = ref(['1', '2', '3', '4', '5', '6', '7', ])


	const checkedz1 = ref('1')
	const checkedz2 = ref('1')
	const valuez1 = ref('')
	const valuez2 = ref('')
	const values1 = ref('')
	const values2 = ref('')
	const values3 = ref('')
	const values4 = ref('')
	const values5 = ref('')
	const values6 = ref('')
	const value2 = ref('')
	const value3 = ref('')
	const valuef1 = ref('')
	const valuef2 = ref('')
	const valuef3 = ref('')
	const valuef4 = ref('')

	const checked = ref("1");
	const checkedtb = ref("1");
	const checked2 = ref("1");
	const checkedf1 = ref("1");
	const checkedf2 = ref("1");
	const checkedf3 = ref("1");
	const checkedf4 = ref("1");
	const checkedz = ref("1");
	const checked3 = ref("1");
	const sizeValue = ref("12");
	const checkedbo = ref("1");
	const checkedyi = ref("1");
	checkedbo
	const toggleTab = (type) => {
		activeName.value = type
	};
	const onChange = (value) => {
		console.log(value)
	}
</script>

<style lang="scss" scoped>
	:deep(.van-cell) {
		padding: 0;
		margin: 18px 0 8px;
		font-size: 14px;
		background: initial !important;
	}
	:deep(.van-cell-group){
		background: initial !important;
		padding: 0 18px 0 25px;
	}
	:deep(.van-collapse-item__content) {
		padding: 0;
		background: initial !important;
	}

	.settings-box {
		padding: 30px 20px;
		background: #f7f9fc;
		height: 100%;
		overflow-y: scroll;
		
		/*平板*/
		/* @media screen and (max-width: 550px) {
			width: 450px;
		} */

		@media screen and (min-width: 1400px) {
			width: 825px;
		}

		.settings-list-item {
			flex-wrap: wrap;

			.settings-list-box {
				width: calc(50% - 20px);

				@media screen and (max-width: 1400px) {
					width: 100%;
				}

			}
		}

		.setting-list-box {
			background-color: #fff;

			@media screen and (min-width: 800px) and (max-width: 1400px) {
				background: transparent !important;
				color: #fff;
			}
		}

		.settings-list-box {}

		/*平板竖屏*/
		@media screen and (min-width: 800px) and (max-width: 1400px) {
			background: #022340 !important;

			.ipad-back {
				background: #022340 !important;
				color: #fff !important;
			}

			.tit {
				color: #fff !important;
				font-size: 20px;
			}
		}

		.settings-list {
			.zhezhu-box2 {
				padding: 10px 20px;
				background: #fff;

				.zhezhu-b {
					width: 100%;
				}

				.zhezhu-r {
					margin-left: auto;

					.sl-input {
						width: 50px;
					}
				}
			}

			.bochu-box-t {
				padding: 0 22px;
			}

			.bochu-box {
				padding: 22px 0;
				background: #fff;
			}

			.speed-box {
				background: #fff;
				padding: 10px 20px;

				.speed-r {
					margin-left: auto;
				}

				.sl-input {
					width: 50px;
				}
			}

			.settings-cont {
				padding: 16px;
				background: #fff;
			}

			.settings-cont-b {
				padding: 5px 10px;
				background: #f7f9fc;

				.settings-cont-b-s {
					width: 72px;
					height: 60px;
					text-align: center;
					line-height: 60px;
					border-radius: 4px 4px 4px 4px;
				}
			}

			.tit {
				margin: 18px 0 8px;
			}

			.page-moshi {
				.btn-box {
					width: calc(33.3333333% - 5px);
					padding: 10px 0;
					text-align: center;
					margin-right: 5px;
					background: #fff;
					color: #9b9da0;

					/*平板竖屏*/
					@media screen and (min-width: 800px) and (max-width: 1400px) {
						background: transparent;
					}

					&.x-btn-box {
						width: calc(50% - 5px);
					}
				}
			}

			.k-btn-box {
				height: 42px;
				width: 150px;
			}

			.t-btn-box {
				height: 42px;
				width: 90px;
			}
		}
	}
</style>